<!--SMT站位表 详情-->
<template>
  <div>
    <el-dialog
      width="85%"
      top="3vh"
      :fullscreen="false"
      title="详情"
      append-to-body
      custom-class="smtStandDialog"
      v-if="showDetailDialog"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="showDetailDialog"
      @close="handleDetailReset"
    >
      <div class="detailArea">
        <avue-form ref="detailRef" v-model="detailDialog.form" :option="detailDialog.option"> </avue-form>
        <avue-crud
          ref="detailCrud"
          :page.sync="page"
          :table-loading="loading"
          v-model="detailDialog.tableForm"
          :option="detailDialog.tableOption"
          :data="detailDialog.tableData"
          @current-change="currentChange"
          @size-change="sizeChange"
        >
          <template slot-scope="scope" slot="replacePartNo">
            <el-button type="text" size="small" @click="handleTdlDetail(scope.row, scope.index)">详情</el-button>
          </template>
        </avue-crud>

        <div class="detailTitle">
          <div class="dot"></div>
          <div class="title">修改日志</div>
        </div>
        <avue-crud ref="detailLogCrud" v-model="detailDialog.tableLogForm" :option="detailDialog.tableLogOption" :data="detailDialog.tableLogData">
          <template slot="menu" slot-scope="scope">
            <el-button
              v-if="scope.index == detailDialog.tableLogData.length - 1"
              type="text"
              size="small"
              :disabled="detailDialog.form.tableVersion == scope.row.tableVersion"
              icon="el-icon-view"
              @click="handleDetailRowView(scope.row, scope.index)"
              >当前版本</el-button
            >
            <el-button
              v-else
              type="text"
              :disabled="detailDialog.form.tableVersion == scope.row.tableVersion"
              size="small"
              icon="el-icon-view"
              @click="handleDetailRowView(scope.row, scope.index)"
              >查看</el-button
            >
          </template>
        </avue-crud>
      </div>
    </el-dialog>
    <!--替代料详情 -->
    <el-dialog
      width="50%"
      top="7vh"
      custom-class="replaceMateriaDialog"
      append-to-body
      title="详情替代料"
      :close-on-click-modal="false"
      :visible.sync="replaceMateriaDialog.visible"
    >
      <avue-crud :data="replaceMateriaDialog.tableData" :option="replaceMateriaDialog.tableOption"></avue-crud>
    </el-dialog>
    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </div>
</template>

<script>
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import smtStandImport from '@/views/product/components/smtStandImport.vue';
import { getList, getDetail, getTrackList, getLogDetail, add, update, remove, removeTrack, verifyMachineCodeOrPartNo } from '@/api/product/smtStandTable';
import { mapGetters } from 'vuex';
export default {
  name: 'SmtStandDetail',
  components: {
    GlobalModalTemplate,
    smtStandImport
  },
  props: {
    showDetailDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rowId: null,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      detailDialog: {
        form: {},
        option: {
          searchShow: true,
          searchMenuSpan: 6,
          menuPosition: 'right',
          submitBtn: false,
          emptyBtn: false,
          group: [
            {
              label: '基础信息',
              prop: 'equipmentInfo',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              labelWidth: 100,
              column: [
                {
                  label: '产品编码',
                  prop: 'partNos',
                  disabled: true,
                  span: 6,
                  rules: [
                    {
                      required: true,
                      message: '请选择产品编码',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '产品名称',
                  prop: 'partNames',
                  disabled: true,
                  span: 6,
                  rules: [
                    {
                      required: true,
                      message: '请选择产品名称',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '站位表名称',
                  prop: 'name',
                  disabled: true,
                  span: 6,
                  rules: [
                    {
                      required: true,
                      message: '请输入站位表名称',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '设备品牌',
                  disabled: true,
                  span: 6,
                  prop: 'machineBrand',
                  rules: [
                    {
                      required: true,
                      message: '请选择设备品牌',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '面向',
                  prop: 'side',
                  type: 'select',
                  span: 6,
                  disabled: true,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicUrl: '/api/blade-system/dict/dictionary?code=side_type',
                  rules: [
                    {
                      required: true,
                      message: '请输入面向',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '站位表版本',
                  prop: 'tableVersion',
                  disabled: true,
                  span: 6
                },
                {
                  label: '站位表编码',
                  prop: 'code',
                  disabled: true,
                  span: 6
                }
              ]
            },
            {
              label: '站位表详情',
              labelWidth: 100,
              prop: 'equipmentInfo',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              column: []
            }
          ]
        },
        tableOption: {
          height: '250px',
          maxHeight: '250px',
          calcHeight: 30,
          tip: false,
          searchShow: false,
          border: true,
          index: true,
          indexLabel: '序号',
          viewBtn: false,
          editBtn: true,
          addBtn: false,
          delBtn: false,
          cellBtn: true,
          labelWidth: 130,
          selection: false,
          refreshBtn: false,
          columnBtn: false,
          highlightCurrentRow: true, // 选中高亮
          dialogClickModal: false,
          menu: false,
          column: [
            {
              label: '站号',
              prop: 'trackNo',
              cell: true
            },
            {
              label: '飞达规格',
              prop: 'feederSpecRequired',
              cell: true
            },
            {
              label: '物料编码',
              width: 150,
              prop: 'partNo'
            },
            {
              label: '物料规格',
              prop: 'partModel'
            },
            {
              label: '位号',
              prop: 'positionNo',
              cell: true
            },
            {
              label: '用量',
              prop: 'quantity'
            },
            {
              label: '面向',
              prop: 'side',
              type: 'select',
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              dicUrl: '/api/blade-system/dict/dictionary?code=side_type',
              rules: [
                {
                  required: true,
                  message: '请输入面向',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '物料品牌',
              prop: 'materialBrand',
              cell: true
            },
            {
              label: '物料供应商',
              prop: 'vendorCode',
              cell: true
            },
            {
              label: '替代料',
              width: 60,
              prop: 'replacePartNo'
            }
          ]
        },
        tableData: [],
        rowIndex: -1,
        tableForm: {},
        tableLogForm: {},
        tableLogOption: {
          height: '200px',
          maxHeight: '200px',
          calcHeight: 30,
          tip: false,
          searchShow: false,
          border: true,
          index: false,
          indexLabel: '序号',
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          cellBtn: true,
          labelWidth: 130,
          selection: false,
          refreshBtn: false,
          columnBtn: false,
          highlightCurrentRow: true, // 选中高亮
          dialogClickModal: false,
          menu: true,
          column: [
            {
              label: '站位表版本',
              prop: 'tableVersion'
            },
            {
              label: '编辑人',
              prop: 'updateUserName'
            },
            {
              label: '修改时间',
              prop: 'updateTime'
            }
          ]
        },
        tableLogData: []
      },
      replaceMateriaDialog: {
        title: '编辑',
        visible: false,
        rowIndex: -1,
        form: {
          domains: [
            {
              code: '',
              name: '',
              yl: ''
            }
          ]
        },
        option: {
          submitText: '保存',
          emptyText: '取消',
          menuPosition: 'right'
        },
        tableData: [],
        tableOption: {
          height: '500px',
          maxHeight: '500px',
          calcHeight: 30,
          tip: false,
          searchShow: false,
          border: true,
          index: true,
          indexLabel: '序号',
          viewBtn: false,
          editBtn: true,
          addBtn: false,
          delBtn: false,
          labelWidth: 130,
          menu: false,
          refreshBtn: false,
          columnBtn: false,
          highlightCurrentRow: true, // 选中高亮
          dialogClickModal: false,
          column: [
            {
              label: '替代料编码',
              prop: 'partNo'
            },
            {
              label: '替代料名称',
              prop: 'partName'
            },
            {
              label: '用量',
              prop: 'usage'
            }
          ]
        }
      },
      form: {},
      query: {},
      cloneForm: {},
      loading: true,
      selectionList: [],
      data: [],
      visibile: false,
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      timer: new Date().getTime() //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.smttable_add, false),
        viewBtn: this.vaildData(this.permission.smttable_view, false),
        delBtn: this.vaildData(this.permission.smttable_delete, false),
        editBtn: this.vaildData(this.permission.smttable_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    // 获取详情 基础信息
    getData(id) {
      this.rowId = id;
      getDetail(this.rowId).then((res) => {
        let data = res.data.data;
        this.detailDialog.form = this._cloneDeep(data);
      });
      this.page.currentPage = 1;
      this.getTable();
      this.getLogData();
    },
    // 获取详情 站位表
    getTable() {
      this.loading = true;
      getTrackList(this.page.currentPage, this.page.pageSize, this.rowId)
        .then((res) => {
          let data = res.data.data;
          this.page.total = data.total;
          this.detailDialog.tableData = data.records;
          this.loading = false;
        })
        .catch((err) => {});
    },
    // 获取详情 日志信息
    getLogData() {
      getLogDetail(this.rowId)
        .then((res) => {
          let data = res.data.data;
          this.detailDialog.tableLogData = data;
        })
        .catch((err) => {});
    },
    handleEdit(row, index) {
      this.showEditDialog = true;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
      }
      if (['add', 'edit'].includes(type)) {
      }
      done();
    },

    openUserCommonModal(params) {
      let { type } = params;
      this.visibile = true;
      this.tableOption = {
        modalTitle: '选择产品信息（双击进行选择）',
        rowSelectionType: 'single',
        menu: false,
        editBtn: false,
        menuWidth: 100,
        searchLabelWidth: 90
      };
      this.tableOption.url = '/api/mes-admin/part-master/page';
      this.tableOption.isPage = true;
      this.tableOption.query = { semifinished: true };
      this.tableOption.templateName = 'NOWORKPARTMASTER';
      switch (type) {
        case 'productCode':
          this.modalName = 'partmasterModal';
          break;
        case 'editProductCode':
          this.modalName = 'editPartmasterModal';
          break;
        case 'replaceProductCode':
          this.modalName = 'replacePartmasterModal';
          break;
        default:
          break;
      }
    },
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'partmasterModal':
          this.importDialog.form.partNo = this._get(rowData, 'partNo', '');
          this.importDialog.form.partName = this._get(rowData, 'name', '');
          break;
        case 'editPartmasterModal':
          let findIndex = this.editDialog.tableData.findIndex((d) => d.$index == this.editDialog.rowIndex);
          this.editDialog.tableData[findIndex].partNo = this._get(rowData, 'partNo', '');
          this.editDialog.tableData[findIndex].partModel = this._get(rowData, 'partModel', '');
          break;
        case 'replacePartmasterModal':
          this.replaceMateriaDialog.form.domains[this.replaceMateriaDialog.rowIndex].code = this._get(rowData, 'partNo', '');
          this.replaceMateriaDialog.form.domains[this.replaceMateriaDialog.rowIndex].name = this._get(rowData, 'partNo', '');
          break;
        default:
          break;
      }
    },

    handleDetailRowView(row, index) {
      this.showDetailDialog = true;
      this.detailDialog.form = row;
      this.rowId = row.id;
      this.getTable();
    },

    async handleTdlDetail(row, index) {
      if (row.replacePartNo) {
        this.replaceMateriaDialog.tableData = JSON.parse(row.replacePartNo);
      } else {
        this.replaceMateriaDialog.tableData = [];
      }
      this.replaceMateriaDialog.visible = true;
    },
    handleReplaceCode(index) {
      this.replaceMateriaDialog.rowIndex = index;
      this.openUserCommonModal({ type: 'replaceProductCode' });
    },

    handleDetailReset() {
      this.showDetailDialog = false;
      this.$emit('closeDetailDialog');
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getTable();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTable();
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .smtStandDialog {
  .el-dialog__body {
    padding: 0 20px 20px;
  }
  .avue-form__menu--right {
    display: none;
  }
  .detailTitle {
    font-size: 16px;
    font-weight: bold;
    height: 20px;
    padding: 10px 0;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    .dot {
      background-color: #66b1ff;
      width: 10px;
      height: 20px;
      margin-right: 8px;
    }
    .title {
      height: 20px;
      margin-bottom: 0;
    }
  }
  .detailArea {
    .avue-crud__menu {
      display: none;
    }
  }
}
::v-deep .replaceMateriaDialog {
  .row {
    display: flex;
    .deleteIcon {
      margin-left: 10px;
    }
  }
  .addIcon {
    display: flex;
    justify-content: center;
  }
  .avue-crud__menu {
    display: none;
  }
}
</style>
